<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP请求与响应完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
            border-radius: 12px;
            overflow: hidden;
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: 0.2rem;
            color: #667eea;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center">
                <div class="floating-icon inline-block mb-6">
                    <i class="fas fa-network-wired text-6xl opacity-80"></i>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">HTTP请求与响应完全指南</h1>
                <p class="text-xl md:text-2xl opacity-90 leading-relaxed">深入理解Web通信的核心机制，掌握请求报文与响应报文的奥秘</p>
                <div class="mt-10 flex justify-center space-x-6">
                    <div class="text-center">
                        <i class="fas fa-paper-plane text-3xl mb-2"></i>
                        <p class="text-sm">请求发送</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-exchange-alt text-3xl mb-2"></i>
                        <p class="text-sm">数据交换</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-reply text-3xl mb-2"></i>
                        <p class="text-sm">响应接收</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
            </svg>
        </div>
    </section>

    <!-- Resource Section -->
    <section class="container mx-auto px-6 py-12">
        <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-8 shadow-lg">
            <div class="flex items-center mb-4">
                <i class="fas fa-video text-3xl text-purple-600 mr-4"></i>
                <h2 class="text-2xl font-bold text-gray-800">学习资源</h2>
            </div>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg p-6 shadow-sm">
                    <p class="text-gray-600 mb-2">视频教程下载：</p>
                    <a href="https://pan.baidu.com/s/1JL9tpA4yYM7Ib7xTNSTrOA" target="_blank" class="text-blue-600 hover:text-blue-800 transition-colors flex items-center">
                        <i class="fas fa-link mr-2"></i>
                        https://pan.baidu.com/s/1JL9tpA4yYM7Ib7xTNSTrOA
                    </a>
                </div>
                <div class="bg-white rounded-lg p-6 shadow-sm">
                    <p class="text-gray-600 mb-2">提取码：</p>
                    <code class="bg-gray-100 px-3 py-1 rounded text-lg font-mono">vumj</code>
                </div>
            </div>
        </div>
    </section>

    <!-- URL Structure Section -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-5xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold gradient-text mb-4">请求地址详情</h2>
                <p class="text-xl text-gray-600">网址的组成结构解析</p>
            </div>
            <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
                <p class="text-lg text-gray-700 mb-6">
                    <span class="drop-cap serif-font">网</span>址一般都有以下几部分组成，理解URL的结构是掌握HTTP请求的第一步。每个部分都承载着特定的功能和意义。
                </p>
                <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1653546015890-6c582abc-9b78-4997-9f53-ddf5ac44e384.png" alt="URL结构图" class="w-full rounded-lg shadow-md">
            </div>
        </div>
    </section>

    <div class="section-divider container mx-auto px-6"></div>

    <!-- Parameter Passing Methods -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-5xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold gradient-text mb-4">参数传递方式</h2>
                <p class="text-xl text-gray-600">发送请求时的四种常见参数传递方式</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-search text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">查询参数传递</h3>
                    </div>
                    <p class="text-gray-600">通过URL中的查询字符串传递参数，如 ?name=value&id=123</p>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-route text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">RESTful风格传递</h3>
                    </div>
                    <p class="text-gray-600">将参数作为URL路径的一部分，如 /users/123/profile</p>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-cookie text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">请求头传递</h3>
                    </div>
                    <p class="text-gray-600">在HTTP请求头中传递参数，Cookie就是典型的请求头参数</p>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-file-alt text-orange-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">请求体传递</h3>
                    </div>
                    <p class="text-gray-600">通过请求体传递数据，支持表单格式和JSON格式</p>
                </div>
            </div>
        </div>
    </section>

    <!-- HTTP Communication Visualization -->
    <section class="bg-gray-100 py-16">
        <div class="container mx-auto px-6">
            <div class="max-w-5xl mx-auto">
                <h2 class="text-4xl font-bold text-center gradient-text mb-12">HTTP通信流程图</h2>
                <div class="bg-white rounded-2xl shadow-xl p-8">
                    <div class="mermaid">
                        graph LR
                            A[客户端] -->|发送请求报文| B[服务器]
                            B -->|返回响应报文| A
                            
                            subgraph 请求报文
                                C[请求行]
                                D[请求头]
                                E[请求体]
                            end
                            
                            subgraph 响应报文
                                F[响应行]
                                G[响应头]
                                H[响应体]
                            end
                            
                            style A fill:#667eea,stroke:#333,stroke-width:2px,color:#fff
                            style B fill:#764ba2,stroke:#333,stroke-width:2px,color:#fff
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Request and Response Details -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-center gradient-text mb-12">抓包数据详解</h2>
            
            <div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-2xl p-8 mb-8">
                <p class="text-lg text-gray-700 leading-relaxed">
                    <i class="fas fa-info-circle text-purple-600 mr-2"></i>
                    任何一个请求发送出去都会有一个请求报文和响应报文，请求报文中包含了请求相关的数据，响应相关的数据都在响应报文中。
                </p>
            </div>

            <!-- Request Example -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-paper-plane text-purple-600 mr-3"></i>
                    发送请求示例
                </h3>
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1653546804038-f0c9bb64-611f-45ee-935e-e88aaf19ada6.png" alt="请求示例" class="w-full">
                </div>
            </div>

            <!-- Request Message -->
            <div class="grid lg:grid-cols-2 gap-8 mb-12">
                <div>
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <i class="fas fa-upload text-blue-600 mr-3"></i>
                        请求报文结构
                    </h3>
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1653546913245-f84e9540-4038-417e-a43b-f5276de78f40.png" alt="请求报文" class="w-full">
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold mb-6">请求报文组成</h